﻿00000000000000000000000000<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JqueryOperateOptions.aspx.cs" Inherits="_jquery_JqueryOperateOptions" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>jquery js Library Operate options</title>
<style type="text/css">
<!--
#tablebox {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9pt;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	color: #006666;
}
#tablebox tr
{
	height:30px;
	background-color:#FFFFFF;
	
}
#tablebox tr:hover
{
	color: #0000FF;
}
#tablebox tr:active
{
	color: #FF0000;
}

-->
</style>
<script src="jquery-latest-pack.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <span onclick="addSelectControl();">COpy TO othere Div</span>
    <div id="Divbox">
        <asp:ListBox ID="ClassIDs" runat="server" Height="349px" Width="214px"></asp:ListBox>
        
    </div>
    
<script type="text/javascript">
var listboxobj = document.getElementById("<%=ClassIDs.ClientID %>");//get operate object
    listboxobj.onchange = function(e){
        // alert(e.clientX);
      
       var ActionDiv = $("#actiondiv");
       ActionDiv.html(this.value);
       ActionDiv.after(
        //使用get 執行 ajax
        $.get("AjaxDataSource.ashx?id="+this.value,
            //參數
            function(obj)
            {
                ActionDiv.html(obj);
            }
            
        )
      );
    };
function addSelectControl()
{
     $("#Divbox").append("<select id=\"Classids2\" >"+$(listboxobj).html()+"</select>");
     $("#Classids2").change(
     function()
     {
        alert(this.value);
        this.style.height="349px";
        this.style.width="214px";
        this.size=4;
     }
     );
}


</script>
    
    <div id="actiondiv"></div>
    </form>
</body>
</html>
